<template>
  <div>
    <!-- 页面头部 黑马优购-->
    <van-nav-bar title="黑马优购" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <div class="box">
      <!-- 地址编辑 -->
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        :address-info="flag ? {} : modify"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="columnsPlaceholder"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>
<script>
// 获取省份以及县区选择
import SelectProvince from './diqu.js'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      title: '黑马优购',
      rightText: '',
      url: '黑马优购',
      addlistq: '',
      save: {},
      // detail: '',
      // 地区列表对象
      areaList: SelectProvince,
      // 详细地址搜索结果
      searchResult: [],
      //  地区选择列占位提示文字
      columnsPlaceholder: ['请选择', '请选择', '请选择']
    }
  },
  components: {

  },
  created() {
    this.$store.commit("setIfShow", false);  
    this.getlist()
  },
  methods: {
    ...mapMutations(['AdTheAddress', 'addlistk', 'judge']),
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    getlist() {
      this.addlistk()
    },
    // 保存触发
    onSave(val) {
      this.addlistq = [
        val.province,
        val.city,
        val.county,
        val.addressDetail,
        val.postalCode,
        val.areaCode
      ]
      if (this.flag === false) {
        const addlists = {
          id: val.id,
          name: val.name,
          tel: val.tel,
          address: this.addlistq,
          isDefault: val.isDefault
        }
        this.AdTheAddress(addlists)
      } else {
        const addlists = {
          id: this.shuID,
          name: val.name,
          tel: val.tel,
          address: this.addlistq,
          isDefault: val.isDefault
        }
        this.AdTheAddress(addlists)
      }
      this.$router.push('/addresslist')
    },
    // 删除触发
    onDelete() {
      const data = JSON.parse(localStorage.getItem('list'))
      const dataId = data.findIndex(item => {
        return item.id === this.modify.id
      })
      data.splice(dataId, 1)
      localStorage.setItem('list', JSON.stringify(data))
      this.$router.push('/addresslist')
    }
  },
  computed: {
    ...mapState(['shuID', 'modify', 'flag'])
  }
}
</script>
<style lang="less" scoped>
.box {
  margin-top: 45px;
}
</style>